<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<!-- 通用卡片模板 -->
<div th:fragment="cardTemplate(type='default')">
    <script type="text/template" id="ruoyiCardTemplate">
        <div class="ruoyi-card {{type}}">
            <div class="card-img-container">
                <img src="{{imgUrl}}" class="card-img" alt="{{title}}">
            </div>
            <div class="card-body">
                <h4 class="card-title">{{title}}</h4>
                <div class="card-content">
                    <!-- 内容插槽 -->
                    {{content}}
                </div>
            </div>
            <div class="card-footer">
                <!-- 操作按钮插槽 -->
                {{buttons}}
            </div>
        </div>
    </script>
</div>

<!-- 课程卡片模板 -->
<div th:fragment="courseCard">
    <script type="text/template" id="courseCardTemplate">
        <div class="ruoyi-card course">
            <div class="card-img-container">
                <img src="{{imgUrl}}" class="card-img">
            </div>
            <div class="card-body">
                <h4 class="card-title">{{name}}</h4>
                <div class="card-price">¥{{price}}</div>
            </div>
            <div class="card-footer">
                <button class="btn btn-primary"
                        data-action="reserve"
                        data-id="{{id}}">购买</button>
            </div>
        </div>
    </script>
</div>

<!-- 宠物用品卡片模板 -->
<div th:fragment="supplyCard">
    <script type="text/template" id="supplyCardTemplate">
        <div class="col-md-3 col-sm-6">
            <div class="ruoyi-card supply">
                <!-- 促销标签（可根据业务需求动态添加） -->
<!--                {{#if isPromotion}}-->
<!--                <div class="badge-promo">限时特惠</div>-->
<!--                {{/if}}-->

                <!-- 图片展示 -->
                <div class="card-img-container">
                    <img src="{{imgUrl}}" class="card-img" alt="{{name}}">
                </div>

                <!-- 内容区域 -->
                <div class="card-body">
                    <!-- 用品名称 -->
                    <h4 class="card-title">{{name}}</h4>

                    <!-- 用品描述 -->
                    <div class="card-description">
                        {{description}}
                    </div>

                    <!-- 价格与库存 -->
                    <div class="price-section">
                        <span class="current-price">¥{{price}}</span>
                    </div>
                    <div class="stock-info">
                        <i class="fa fa-paw"></i>
                        <span>库存 {{stockQuantity}}件</span>
                    </div>

                    <!-- 操作按钮 -->
                    <button class="btn-buy"
                            data-action="buy"
                            data-id="{{id}}"{{disabled}}>
                    {{btnText}}
                    </button>
                </div>
            </div>
        </div>
    </script>
</div>
</body>
</html>